<template>
  <div class="edit container">

    <form v-on:submit="updateCustomer">
      <div class="well">
        <div class="form-group">
          <label>姓名</label>
          <input type="text" class="form-control" placeholder="name" v-model="customer.name">
        </div>
        <div class="form-group">
          <label>性别</label>
          <input type="text" class="form-control" placeholder="sex" v-model="customer.sex">
        </div>
        <div class="form-group">
          <label>家庭电话</label>
          <input type="text" class="form-control" placeholder="homephone" v-model="customer.homephone">
        </div>
        <div class="form-group">
          <label>邮件</label>
          <input type="text" class="form-control" placeholder="email" v-model="customer.email">
        </div>
        <div class="form-group">
          <label>手机</label>
          <input type="text" class="form-control" placeholder="mobilephone" v-model="customer.mobilephone">
        </div>
        <div class="form-group">
          <label>家庭住址</label>
          <textarea class="form-control" rows="5" v-model="customer.address"></textarea>
        </div>
        <div class="alarm" v-if="alertValue">{{alert}}</div>
        <button type="submit" class="btn btn-primary">编辑</button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: 'EditContacts',
  data () {
    return {
      customer: {},
      alert: '',
      alertValue: false
    }
  },
  methods: {
    fetchCustomer (id) {
      this.$http.get('http://localhost:3000/users/' + id)
        .then(function (response) {
          // console.log(response)
          this.customer = response.body
        })
    },
    updateCustomer (e) {
      if (!this.customer.name || !this.customer.mobilephone || !this.customer.email) {
        this.alertValue = true
        this.alert = '请添加对应的信息!'
      } else {
        let updateCustomer = {
          name: this.customer.name,
          sex: this.customer.sex,
          homephone: this.customer.homephone,
          email: this.customer.email,
          mobilephone: this.customer.mobilephone,
          address: this.customer.address
        }

        this.$http.put('http://localhost:3000/users/' + this.$route.params.id, updateCustomer)
          .then((response) => {
            console.log(response)
            this.$router.push({path: '/Contacts/Center', query: {alert: '用户信息更新成功!'}})
          })
        e.preventDefault()
      }
      e.preventDefault()
    }
  },
  created () {
    this.fetchCustomer(this.$route.params.id)
  }
}
</script>

<style scoped>
  .well{
    background: white;
    border: none;
  }
  .alarm{
    color: red;
    height: 20px;
    width: 100%;
  }
  input[type="text"],textarea{
    border: 1px solid #428eda;
  }
  button[type="submit"]{
    display: block;
    height: 40px;
    width: 100%;
    margin-top: 18px;
    background: #428eda;
    color: #fff;
    border: 0;
    border-radius: 18px;
    font-size: 16px;
    cursor: pointer;
  }
</style>
